<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .btnbox {
        display: flex;
        justify-content: center;
        width: 600px;
    }

    .btnbox .btn {
        font-size: 16px;
        padding: 8px 20px;
        border-radius: 20px;
        background-color: #ccc;
        color: #4066d0;
        display: flex;
        margin-right: 30px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
</style>

<body>
    <canvas style="border: 1px solid #ccc;" width="600" height="400" id="mycanvas"></canvas>
    <div class="btnbox">
        <div class="btn" id="startBtn">start</div>
        <div class="btn" id="endBtn">end</div>
        <div class="btn" id="changeBtn">change</div>
    </div>
</body>
<script>
    let canvas = document.getElementById('mycanvas')
    let startBtn = document.getElementById('startBtn')
    let endBtn = document.getElementById('endBtn')
    let changeBtn = document.getElementById('changeBtn')
    let ctx = canvas.getContext('2d')

    //游戏对象
    class Pig {
        constructor(x, y, img, number) {
            this.x = x
            this.y = y
            this.state = 0
            this.img = img
            this.number = number
        }
        update() {
            this.state++
            switch (this.number) {
                case 1:
                    this.x -= 10
                    break;
                case 2:
                    this.x += 10
                    break;
                default:
                    break;
            }
            if (this.state > 3) {
                this.state = 0
            }
        }
        render() {
            ctx.drawImage(this.img, this.state * 48, 64 * this.number, 48, 64, this.x, this.y, 64, 48)
        }
    }
    //游戏进程
    class Game {
        constructor(number) {
            this.img = new Static().img
            switch (number) {
                case 1:
                    this.x = 580
                    break;
                default:
                    this.x = 20
                    break;
            }
            this.pig = new Pig(this.x, 300, this.img, number)
            this.timer = null
            this.img.onload = () => {
                this.run()
            }
        }
        //主循环
        mainLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            this.pig.update()
            this.pig.render()
        }
        //执行主循环
        run() {
            this.timer = setInterval(() => {
                this.mainLoop()
            }, 100)
        }
        //停止主循环
        stop() {
            clearInterval(this.timer)
            console.log(123);
        }
    }
    //游戏资源
    class Static {
        constructor() {
            this.img = new Image()
            this.img.src = './static/image/pig.png'
        }
    }
    var number = 0  
    var game1 = null
    startBtn.addEventListener('click', () => {
        game1.run()
    })
    endBtn.addEventListener('click', () => {
        game1.stop()
    })
    changeBtn.addEventListener('click', () => {
        if(game1){
        game1.stop()
        }
        number ++
        if(number > 3){
            number = 0
        }
         game1 = new Game(number)
    })
</script>

</html>